<template>
  <div>
    <div class="header">
      <h1>三藏药业</h1>
      <p>探索各种药品的名称、成分和功效</p>
    </div>
    <el-collapse v-model="activeNames" class="collapse-container">
      <el-collapse-item
        v-for="(fruit, index) in fruits"
        :key="index"
        :title="fruit.name"
        :name="index"
      >
        <div class="fruit-info">
          <div class="fruit-details">
            <strong>名称:</strong> {{ fruit.origin }}<br />
            <strong>批准编号:</strong> {{ fruit.season }}<br />
            <strong>药品成分:</strong> {{ fruit.description }}
          </div>
          <div class="fruit-benefits">
            <strong>功效:</strong>
            <ul>
              <li v-for="(benefit, i) in fruit.benefits" :key="i">
                {{ benefit }}
              </li>
            </ul>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        {
          name: "固本延龄丸",
          origin: "固本延龄丸",
          season: "国药准字Z20023413",
          description: "人参、麦冬、五味子、天冬、地黄、熟地黄、山药、泽泻、茯苓、牛膝、山茱萸、杜仲、木香、远志、柏子仁、巴戟天（盐制）、花椒、石菖蒲、丹参、肉苁蓉、枸杞子、覆盆子、地骨皮、鹿角胶、菟丝子、鱼鳔珠、珍珠、狗鞭。辅料为：蜂蜜。",
          benefits: ["固本延龄丸具有滋阴补髓、强筋壮骨的作用。主要用于治疗腰肌损伤、腰酸背痛、心悸、失眠、皮肤憔悴、经血不调、经期黑血、疼痛、食欲不振等疾病", 
          ],
        },
        {
          name: "参术儿康糖浆",
          origin: "参术儿康糖浆",
          season: "国药准字Z20026911",
          description: "白术（麸炒） 、茯苓、山楂（炒） 、山药（炒） 、白扁豆（炒） 、六神曲（炒） 、麦芽（炒） 、炙黄芪、太子参、蜂王浆、 制何首乌、当归等16昧",
          benefits: [
          "健脾和胃，益气养血。用于脾胃虚弱所致的小儿疳积，食欲不振，睡眠不安，多汗及营养不良性贫血。",
          ],
        },
        {
          name: "三七胶囊",
          origin: "三七胶囊",
          season: "国药准字Z20027703",
          description: "三七。",
          benefits: [
            "具有化瘀止血、消肿止痛的功效。",
          ],
        },
      ],
    };
  },
  components: {},
  methods: {},
};
</script>

<style  >
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0 auto;
  max-width: 1200px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.header {
  margin-bottom: 30px;
}

.header h1 {
  font-size: 2.5em;
  color: #42b983;
  margin-bottom: 10px;
}

.header p {
  font-size: 1.2em;
  color: #666;
}

.collapse-container {
  text-align: left;
}

.fruit-info {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fruit-details {
  flex: 1;
}

.fruit-benefits {
  flex: 1;
  margin-left: 20px;
}

.fruit-benefits ul {
  list-style-type: disc;
  padding-left: 20px;
}

.fruit-benefits li {
  margin: 5px 0;
}
</style>